import React, {useState, useRef} from 'react'
import {Tabs} from 'antd'
import { PageHeaderWrapper } from '@ant-design/pro-layout'
import ProTable, { ProColumns, ActionType } from '@ant-design/pro-table'
import { connect,history} from 'umi'
import { getScoreList} from '../service'
import moment from 'moment'
import Detail from '../Detail/Detail'


const TableList = () => {
  const  { TabPane } = Tabs;
  const actionRef = useRef();
  const actionRef2 = useRef();
  const [tabIndex, setTabIndex] = useState("0");
  const [visible,setVisible] = useState(false);
  const [current,setCurrent] = useState({});

  const score = (name,programId,id,programName) => {
    let obj = JSON.stringify({'programId':programId,'id':id,'programName':programName,'name':name});
    history.push(`/personnel/score/edit/${obj}`);
  };

  const detail = (id) => {
    setVisible(true);
    setCurrent(id);
  };

  const handleChangTabIndex = (key) => {
    setTabIndex(key);
    if(key === '0'){
      actionRef.current &&  actionRef.current.reload();
    }else{
      actionRef2.current && actionRef2.current.reload();
    }
  };

  const handleCancel = () => {
    setVisible(false);
    setCurrent({});
  };

  const columns = [
    {
      title: '序号',
      render:(text,record,index)=>`${index+1}`,
      hideInSearch: true,
    },
    {
      title: '被评分人',
      dataIndex: 'name',
      hideInSearch: true,
    },
    {
      title: '公司',
      hideInSearch: true,
      dataIndex: 'orgName',
    },
    {
      title: '部门',
      hideInSearch: true,
      dataIndex: 'unitName',
    },
    {
      title: '岗位',
      hideInSearch: true,
      dataIndex: 'jobName',
    },
    {
      title: '评分类型',
      dataIndex: 'programName',
      hideInSearch: true,
    },
    {
      title: '状态',
      dataIndex: 'status',
      valueEnum: {
        0: { text: '未评分', status: 'Default' },
        1: { text: '已评分', status: 'Success' },
        2: { text: '已终止', status: 'Default' },
      },
    },
    {
      title: '创建日期',
      dataIndex: 'createTime',
      hideInSearch: true,
      render: (text) => {
        return moment(text).format('YYYY-MM-DD');
      },
    },
    {
      title: '评分日期',
      dataIndex: 'scoreTime',
      hideInSearch: true,
      render: (text) => {
        return text !== '-' ? moment(text).format('YYYY-MM-DD') : '';
      },
    },
    {
      title: '操作',
      dataIndex: 'option',
      valueType: 'option',
      render: (item, record) => (
        <>
          {(tabIndex === '0') && <a onClick={() => score(record.name,record.programId,record.id,record.programName)}>评分</a>}
          {(tabIndex === '1') && <a onClick={() => detail(record)}>查看详情</a>}
        </>
      ),
    }
  ];

  return (
    <PageHeaderWrapper>
      <Tabs animated={false} defaultActiveKey="0" onChange={handleChangTabIndex}>
        <TabPane tab="未处理" key="0">
          <ProTable
            actionRef={actionRef}
            rowKey="id"
            search={false}
            request={(params) => getScoreList(params,tabIndex)}
            columns={columns}
          />
        </TabPane>
        <TabPane tab="已处理" key="1">
          <ProTable
            actionRef={actionRef2}
            rowKey="id"
            search={false}
            request={(params) => getScoreList(params,null)}
            columns={columns}
          />
          <Detail
            visible={visible}
            current={current}
            onCancel={handleCancel}
          />
        </TabPane>
      </Tabs>
    </PageHeaderWrapper>
  )
};

export default connect(() => ({
}))(TableList)
